<template>
	<view class="bg-white">
		<u-sticky>
			<view class="p-2 bg-white">
				<u-search
					placeholder="搜索您想要的内容"
					v-model="searchVal"
					bgColor="#ffffff"
					:focus="true"
					:actionStyle="actionStyle"
					borderColor="#D2D2D2"
					@search="searchChange"
					@custom="searchChange"
				></u-search>
			</view>
		</u-sticky>
		<view class="hot_word" :style="{ top: statusLineBottom + 6 + 'px' }">
			<view class="bg-white p-2" v-if="!isShow" style="min-height:94vh;height:100%">
				<view class="hotLabel font_24 flex align-center">
					<image class="hot_icon" src="@/static/img2/home/hot_word.png" mode=""></image>
					<text class="font_24 font-weight-bolder ml-1">热门关键词</text>
				</view>
				<view class="flex flex-wrap">
					<!-- <text class="my-1 h6 c_3 mr-5" v-for="item of hotWord" :key="item.id" @click="hotSearch(item.content)">{{ item.content }}</text> -->
					<text class="my-1 h6 c_3 mr-5" v-for="(item, index) of hotWord" :key="index" @click="hotSearch(item.content)">{{ item.content }}</text>
				</view>
			</view>
			<search-list ref="searchRef" v-else :search-val="searchVal"></search-list>
		</view>
	</view>
</template>

<script>
import { searchStorage } from '@/api/home/search.js';
import searchList from './search_list.vue';
export default {
	components: { searchList },
	data() {
		return {
			statusLineTop: 5,
			statusLineWidth: 0,
			statusLineBottom: 0,
			searchVal: '',
			// hotWord: [],
			hotWord: [],
			isShow: false,
			actionStyle: {
				color: '#ffffff',
				padding: '0 40rpx',
				background: '#CF1526',
				width: '200rpx',
				height: '68rpx',
				lineHeight: '68rpx',
				borderRadius: '0 200rpx 200rpx 0',
				marginLeft: '0'
			}
		};
	},
	onReady() {
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); //获取胶囊坐标信息
		// console.log(menuButtonInfo);
		this.statusLineTop = menuButtonInfo.top;
		this.statusLineWidth = menuButtonInfo.width + 40;
		this.statusLineBottom = menuButtonInfo.bottom;
	},
	onLoad(option) {
		this.getHotWord();
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		if (option.val) {
			this.hotSearch(option.val);
		}
		this.hotWord = JSON.parse(option.searchlist);
	},
	onReachBottom() {
		uni.$emit('onReachBottom');
	},
	methods: {
		// 搜索
		searchChange() {
			// console.log('==', this.searchVal);
			if (!this.searchVal) {
				uni.$u.toast('请输入您想要搜索的内容');
			} else {
				this.isShow = true;
				this.$nextTick(() => {
					// console.log(this.$refs.searchRef);
					this.$refs.searchRef.parentSearch();
				});
			}
		},
		// 获取热门关键词
		getHotWord() {
			searchStorage()
				.then(res => {
					// console.log(res);
					if (res.code == 0) {
						this.hotWord = res.data;
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('获取热门关键词失败', err);
				});
		},
		hotSearch(val) {
			this.searchVal = val;
			this.isShow = true;
			this.$nextTick(() => {
				// console.log(this.$refs.searchRef);
				this.$refs.searchRef.parentSearch();
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.hot_word {
	width: 100%;

	.hotLabel {
		.hot_icon {
			width: 24rpx;
			height: 26rpx;
		}

		text {
			color: #111111;
		}
	}
}

::v-deep .u-search__content {
	border-radius: 200rpx 0 0 200rpx !important;
	border-right: 0;
	height: 68rpx;
}
</style>
